<template>
	<div style="width: 100%; height: 100%; background-color: cadetblue; display: flex;
		justify-content: center; align-items: center;">
		<div class="index_main_div">
			<div class="left_div">
				<el-image :src="header" class="header_cls" fit="cover"></el-image>
				<span style="margin-top: 10px; color: white; font-weight: 900;">{{nickname}}</span>
				<el-button style="margin: 10px;" size="mini" type="danger" @click="swithUser()">切换用户</el-button>
				
				<div class="menu_div">
					<img @click="goPage('/Message')" src="../assets/msg.png"/>
					<img @click="goPage('/Friends')" src="../assets/friends.png"/>
					<img @click="goPage('/InsertFriend')" src="../assets/add.png"/>
					<el-badge :value="reqNum" :hidden="reqNum==0" :max="99">
						<img @click="goPage('/Requests')" src="../assets/friendrequest.png"/>
					</el-badge>
				</div>
			</div>
			<div class="right_div">
				<!-- 路由出口 -->
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
	
	export default {
		data() {
			return {
				header: require("@/assets/header.png"),
				nickname: "昵称",
				//待处理的申请数量
				reqNum: 0
			}
		},
		mounted() {
			var user = this.$.getUser();
			console.log("---->",user);
			if(!user){
				//跳转到登录页
				this.$router.push("/");
				return;
			}
			
			this.nickname = user.nickname;
			this.header = this.$.getImg(user.header);
			
			//初始化websocket的连接
			this.$ws.initWs();
		},
		methods:{
			//跳转到指定的页面
			goPage(url){
				this.$router.push(url);
			},
			//切换用户
			swithUser(){
				//删除本地令牌
				window.localStorage.removeItem("jwtToken");
				
				//断开连接
				this.$ws.close();
				
				//跳转到登录页
				this.$router.push("/");
			}
		}
	}
	
</script>

<style>
	.index_main_div {
		width: 1200px;
		min-width: 1200px;
		height: 600px;
		background-color: white;
		display: flex;
		flex-direction: row;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .5);
	}
	
	.left_div {
		width: 80px;
		background-color: dimgray;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
	}
	
	.right_div {
		flex-grow: 1;
		background-color: whitesmoke;
	}
	
	.header_cls {
		width: 60px;
		height: 60px;
		
	}
	
	.menu_div {
		display: flex;
		flex-direction: column;
		margin-top: 40px;
	}
	
	.menu_div img {
		width: 30px;
		height: 30px;
		margin-bottom: 40px;
		cursor: pointer;
	}
	
</style>